<template>
  <view>
    <swiper
      class="test-h"
      indicatorColor="#999"
      indicatorActiveColor="#333"
      current="1"
      :circular="true"
      :autoplay="true"
      :indicatorDots="true"
    >
      <swiper-item v-for="(item, idx) in imgUrls" :key="idx">
        <image :src="item" class="slide-image" />
      </swiper-item>
    </swiper>
  </view>
  <view class="cu-bar bg-white solid-bottom">
    <view class="action">
      <text class="cuIcon-title text-blue"></text> 我的团队
    </view>
  </view>
  <view class="bg-white">
    <AtGrid
      columnNum="4"
      :hasBorder="false"
      :data="gridApps"
      @click="onClickApp"
    />
  </view>
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-blue"></text> 最近使用
    </view>
  </view>
  <view class="bg-white">
    <AtGrid
      columnNum="4"
      :hasBorder="false"
      :data="gridApps"
      @click="onClickApp"
    />
  </view>
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-blue"></text> 设置 & 帮助
    </view>
  </view>
  <view class="bg-white">
    <AtGrid
      columnNum="2"
      mode="rect"
      :hasBorder="false"
      :data="helpGirds"
      @click="onClickApp"
    />
  </view>
</template>
<script lang="ts">
import './index.scss'
import { defineComponent, reactive } from 'vue'
import { AtGrid } from 'taro-ui-vue3/lib'
import Taro from '@tarojs/taro'

interface AppGrid {
  value?: String
  image?: String
  iconInfo?: String
}

export default defineComponent({
  components: {
    AtGrid,
  },
  setup() {
    const gridApps = reactive([
      {
        image:
          'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
        value: 'hz',
      },
    ] as AppGrid[])

    const helpGirds = reactive([
      {
        image:
          'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
        value: '新建团队',
      },
      {
        image:
          'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
        value: '在线留言',
      },
      {
        image:
          'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
        value: '联系顾问',
      },
    ])

    const imgUrls = reactive([
      'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
      'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
      'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180',
    ])

    const onClickApp = (item: AppGrid) => {
      Taro.showToast({
        title: '点击了' + item.value,
        icon: 'success',
        duration: 1000,
      })
      Taro.navigateTo({ url: '/pages/teamHome/index' })
    }

    return { imgUrls, gridApps, helpGirds, onClickApp }
  },
})
</script>
